<template>
  <transition
    name="modal-fade"
    @after-leave="closed">
    <div v-show="show" class="base-modal-mask" :class="[modal? 'no-mask' : '']" :style="modalStyle" @click.self="maskClose" @click.stop>
      <div 
        :class="{
          'base-modal': true,
          'transition__container': transitionEnabled,
          'base-modal-fullscreen': isFullscreen
        }" 
        :style="{width: width, height: height}"
      >
        <div class="base-modal-header">
          <slot name="header">
            <slot name="title">
              <h3 v-if="title">
                {{title}}
                <slot name="describe"></slot>
              </h3>
            </slot>
            <button type="button" v-if="allowFullscreen" @click="isFullscreen = !isFullscreen">
              <i class="iconfont icon-quanping"></i>
            </button>
            <button type="button" class="base-modal-header-close" @click="cancel" v-if="closeable">
              <i class="iconfont icon-fe-close"></i>
            </button>
          </slot>
        </div>
        <div :class="['base-modal-body', defaultStyle ? 'base-modal-body-default' : '', bodyClass]">
          <slot></slot>
        </div>
        <div class="base-modal-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { getScrollBarWidth, hasClass, removeClass, addClass, getStyle } from '@src/util/dom';
import _popupManager from 'element-ui/lib/utils/popup/popup-manager';

let startZIndex = 1000;

export default {
  name: 'base-modal',
  props: {
    show: { // 是否显示组件
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '640px'
    },
    height: {
      type: String,
      default: ''
    },
    closeable: { // 是否能手动关闭
      type: Boolean,
      default: true
    },
    maskCloseable: {// 是否允许点击遮罩关闭
      type: Boolean,
      default: false
    },
    bodyClass: String,
    appendToBody: { // 是否将弹窗插入body中
      type: Boolean,
      default: false
    },
    /** 是否允许全屏 */
    allowFullscreen: { 
      type: Boolean,
      default: false
    },
    transitionEnabled: {
      type: Boolean,
      default: true
    },
    // 现在好像没有通用的一些样式，比如body的padding，所以加个字段控制下，加了就走通用的样式
    defaultStyle: {
      type: Boolean,
      default: false
    },
    // 是否需要蒙层
    modal:{
      type:Boolean,
      defautl: true
    }
  },
  data(){
    return {
      isFullscreen: false,
      startZIndex,
    }
  },
  watch: {
    show(val) {
      
      if (val) {
        _popupManager.nextZIndex();
        startZIndex = _popupManager.zIndex;
        this.startZIndex = startZIndex
        return this.computeStyle();
      }
      
      this.restoreBodyStyle();
      this.isFullscreen = false;
    }
  },
  computed: {
    modalStyle() {
      return {
        zIndex: this.startZIndex,
      }
    }
  },
  methods: {
    closed() {
      this.$emit('closed'); // 关闭动画结束时触发
    },
    close() {
      this.$emit('close'); // 关闭时触发
      // 兼容sync
      this.$emit('update:show', false);
    },
    cancel() {
      this.$emit('cancel'); // 点击关闭按钮，或遮罩层关闭时触发
      this.close();
    },
    maskClose() {
      if (this.closeable && this.maskCloseable) {
        this.cancel();
      }
    },
    escClose(event) {
      if (this.show && this.closeable && event.keyCode == 27) {
        this.cancel();
      }
    },
    computeStyle() {
      this.withoutHiddenClass = !hasClass(document.body, 'overflow-body-for-modal');
      this.bodyPaddingRight = document.body.style.paddingRight;
      let computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);
      let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
      let bodyOverflowY = getStyle(document.body, 'overflowY');
      let scrollBarWidth = getScrollBarWidth();
      
      if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
        document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarWidth }px`;
      }
      addClass(document.body, `${document.body.className} overflow-body-for-modal`);
    },
    restoreBodyStyle() {
      if (!this.show && this.withoutHiddenClass) {
        document.body.style.paddingRight = this.bodyPaddingRight;
        removeClass(document.body, 'overflow-body-for-modal');
      }
      this.withoutHiddenClass = true;
    }
  },
  mounted() {    
    if (this.appendToBody) {
      document.body.appendChild(this.$el);
    }
  },
  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
}
</script>

<style lang="scss">
.overflow-body-for-modal {
  overflow: hidden;
}

.base-modal-mask {
  @include mask();
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  overflow: auto;
}
.no-mask{
  background-color:transparent;
}

.base-modal {
  position: relative;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 1px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  
  max-height: calc(100% - 100px);
  max-height: calc(100vh - 100px);
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  
  &.base-modal-fullscreen{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: auto !important;
    height: 100vh !important;
    max-height: 100vh;
  }
}

.base-modal-header {
  background-color: #FAFAFA;
  min-height: 44px;
  position: relative;
  padding: 10px 15px 10px 20px;
  background-color: $bg-color-l2;
  font-size: 16px;
  color: $text-color-primary;
  font-weight: normal;
  
  display: flex;
  align-items: center;
  
  h3 {
    flex: 1;
    margin: 0;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    font-size: 18px;
    
    @include text-ellipsis()
  }
  
  button{
    height: 24px;
    line-height: 24px;
    width: 24px;
    
    padding: 0;
    margin: 0;
    outline: none;
    color: #666;
    border: none;
    background-color: transparent;
    transition: color ease .15s;
    
    i {
      font-size: 14px;
    }
    
    &:hover{
      @include fontColor();
    }
    
    &.base-modal-header-close:hover {
      color: #e84040;
    }
  }

  button + button{
    margin-left: 5px;
  }
}

.base-modal-body {
  flex: 1;
  overflow: auto;
}

.base-modal-body.base-modal-body-default {
  padding: 16px 24px;
}

//TODO: 统一边距
.base-modal-footer {
  // min-height: 52px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
  border-top: 1px solid $color-border-l2;
}

.base-modal-text-btn{
  outline: none;
  border:none;
  background-color: transparent;
  color: $text-color-secondary;
  
  &:hover{
    background-color: #f0f0f0;
  }
  
  &:disabled{
    cursor: not-allowed;
  }
  
  & + button{
    margin-left: 10px;
  }
}
</style>
